---
title: File Upload
description: Used to select and upload files from their device.
links:
  source: components/file-upload
  storybook: components-file-upload--basic
  recipe: file-upload
  ark: https://ark-ui.com/react/docs/components/file-upload
---

<ExampleTabs name="file-upload-basic" />

## Anatomy

```jsx
import { FileUpload } from '@saas-ui/react/file-upload'
```

```jsx
<FileUpload.Root>
  <FileUpload.Dropzone>
    <FileUpload.Trigger asChild>
      <Button>Select files</Button>
    </FileUpload.Trigger>
  </FileUpload.Dropzone>
  <FileUpload.List />
</FileUpload.Root>
```

## Examples

### Directory

Use the `directory` prop to allow selecting a directory instead of a file.

<ExampleTabs name="file-upload-directory" />

### Media Capture

Use the `capture` prop to select and upload files from different environments
and media types.

> **Note:** This is
> [not fully supported](https://caniuse.com/mdn-api_htmlinputelement_capture) in
> all browsers.

<ExampleTabs name="file-upload-media-capture" />

### Multiple Files

Upload multiple files at once by using the `maxFiles` prop.

<ExampleTabs name="file-upload-multiple" />

### Dropzone

Drop multiple files inside the dropzone and use the `maxFiles` prop to set the
number of files that can be uploaded at once.

<ExampleTabs name="file-upload-with-dropzone" />

### Input

Use the `FileInput` component to create a trigger that looks like a text input.

<ExampleTabs name="file-upload-with-input" />

### Clearable

Here's an example of a clearable file upload input.

<ExampleTabs name="file-upload-with-input-clear" />

### Accepted Files

Define the accepted files for upload using the `accept` prop.

<ExampleTabs name="file-upload-accepted-files" />

## Props

### Root

<PropTable component="FileUpload" part="Root" />
